<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {WMTS} from 'ol/source';
    import {Tile as TileLayer} from 'ol/layer';
    import {getWidth,getTopLeft} from 'ol/extent'
    import WMTSTileGrid from 'ol/tilegrid/WMTS';
    import {get} from 'ol/proj'

    export default {
        name: 'WMTS',
        data() {
            return {}
        },
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    // new TileLayer({
                    //     source: new OSM()//加载OpenStreetMap
                    // }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            //WMTS图层数据
            var wmtsLayer;
            //通过范围计算得到分辨率数组
            var projection = get('EPSG:4326');
            var projectionExtent = projection.getExtent();
            var size = getWidth(projectionExtent) / 256;//每个瓦片的高宽
            var resolutions = new Array(19);//图片的分辨率
            var matrixIds = new Array(19);//wmts支持的投影方式
            for (var z = 0; z < 19; ++z) {
                //生成WMTS分辨率和matrixIds数组
                resolutions[z] = size / Math.pow(2, z);//分辨率
                matrixIds[z] = z;//层级
            }

            //实例化WMTS服务图层对象（ol.layer.Tile，ol.source.WMTS）
            wmtsLayer = new TileLayer({//wmts是瓦片图层，使用瓦片图层加载
                opacity: 1, //图层透明度
                source: new WMTS({
                    // 数据源信息
                    attributions: 'Tiles &copy; <a href="http://t0.tianditu.cn/cva_c/wmts?LAYER=cva">天地图矢量注记</a>',
                    //WMTS服务基地址
                    url: 'http://t0.tianditu.gov.cn/cva_c/wmts?LAYER=cva&tk=3bc6874f2b919aa581635abab7759a3f',
                    //投影坐标系设置矩阵
                    matrixSet: 'c',
                    //图片格式
                    format: 'tiles', 
                    //数据的投影坐标系
                    //projection: projection,
                    //瓦片网格对象
                    tileGrid: new WMTSTileGrid({
                        //原点（左上角）
                        origin: getTopLeft(projectionExtent),
                        //分辨率数组
                        resolutions: resolutions,
                        //矩阵标识列表，与地图级数保持一致
                        matrixIds: matrixIds
                    }),
                    style: 'default',
                    wrapX: true
                })
            });
            this.map.addLayer(wmtsLayer);
        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
